/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {StyleSheet, View, Image, StatusBar, Dimensions} from 'react-native';

import TabNavigator from 'react-native-tab-navigator';

import Common from '../component/common';

import Home from './home/index';

import SpecialColumn from './specialColumn/index';

import Mine from './me/index';

const STATUS_BAR_HEIGHT = StatusBar.currentHeight || 20;

const totalWidth = Dimensions.get('window').width;

const TAB_NORMAL_1=require('../images/bottombar/bangdanoff.png');
const TAB_NORMAL_2=require('../images/bottombar/zhuanlanoff.png');
const TAB_NORMAL_3=require('../images/bottombar/wodeoff.png');
const TAB_PRESS_1=require('../images/bottombar/bangdan.png');
const TAB_PRESS_2=require('../images/bottombar/zhuanlan.png');
const TAB_PRESS_3=require('../images/bottombar/wode.png');

export default class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'Home',
      checkDevice: '',
    };
  }
  componentWillMount(){
    Common.checkDevice((checkDevice) => {
      this.setState({checkDevice});
    });
  }
  onPress = (tabName) => {
    if(tabName){
      this.setState({selectedTab:tabName});
    }
  };
  tabBarView = () => {
    return(
      <View style={{flex:1}}>
        <TabNavigator tabBarStyle={[styles.tab,this.state.checkDevice == 'x'?{height: totalWidth*0.2,paddingBottom: totalWidth*0.05}:null]} >
          <TabNavigator.Item
           title={'榜单'}
           renderIcon={()=><Image style={styles.tabIcon} source={TAB_NORMAL_1}/>}
           renderSelectedIcon={()=><Image style={styles.tabIcon} source={TAB_PRESS_1}/>}
           selected={this.state.selectedTab==='Home'}
           titleStyle={styles.title}
           selectedTitleStyle={styles.selectedTitle}
           onPress={()=>this.onPress('Home')}
          >
            <Home {...this.props}/>
          </TabNavigator.Item>
          <TabNavigator.Item
           title={'专栏'}
           renderIcon={()=><Image style={styles.tabIcon} source={TAB_NORMAL_2}/>}
           renderSelectedIcon={()=><Image style={styles.tabIcon} source={TAB_PRESS_2}/>}
           selected={this.state.selectedTab==='Information'}
           titleStyle={styles.title}
           selectedTitleStyle={styles.selectedTitle}
           onPress={()=>this.onPress('Information')}
          >
            <SpecialColumn {...this.props}/>
          </TabNavigator.Item>
          <TabNavigator.Item
           title={'我的'}
           renderIcon={()=><Image style={styles.tabIcon} source={TAB_NORMAL_3}/>}
           renderSelectedIcon={()=><Image style={styles.tabIcon} source={TAB_PRESS_3}/>}
           selected={this.state.selectedTab==='Mine'}
           titleStyle={styles.title}
           selectedTitleStyle={styles.selectedTitle}
           onPress={()=>this.onPress('Mine')}
          >
            <Mine {...this.props}/>
          </TabNavigator.Item>
        </TabNavigator>
      </View>
    );
  };

  render() {
     var tabBarView=this.tabBarView();
     return (
       <View style={styles.container}>
         {tabBarView}
       </View>
     );
   }
 }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  tab:{
    flex: 1,
    height:totalWidth*0.14,
    alignItems:'center',
    backgroundColor:'#fff',
  },
  tabIcon: {
    width: totalWidth*0.07,
    height: totalWidth*0.07,
    resizeMode: 'contain',
  },
  title: {
    color: '#b7b7b7', fontSize: 8
  },
  selectedTitle: {
    color:'#f85959', fontSize: 8
  },
});